<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3>小黑的书架</h3>
      <ul>
        <li v-for="book in booksList">
          <span>{{ book.name }}</span>
          <span>{{ book.author }}</span>
          <button @click="del(book.id)">删除</button>
        </li>
      </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
      const booksList = [
        { id: 1, name: '《红楼梦》', author: '曹雪芹' },
        { id: 2, name: '《西游记》', author: '吴承恩' },
        { id: 3, name: '《水浒传》', author: '施耐庵' },
        { id: 4, name: '《三国演义》', author: '罗贯中' },
      ];

      // filter 过滤出匹配条件的元素，组成一个【新数组】，并作为filter函数的返回值
      // 所谓的条件：就是filter函数的【实参函数】的返回值，true：满足，false：不满足
      const newBooksList = booksList.filter(v => v.id !== 3);
      // 先准备一个空的新数组：[]
      // 第一次循环：v ==> { id: 1, name: '《红楼梦》', author: '曹雪芹' }
      // 第一次调用实参函数，返回值：1 !== 3 ==> true ==> 方到新数组中 ==> [{ id: 1, name: '《红楼梦》', author: '曹雪芹' }]

      // 第二次循环：v ==> { id: 2, name: '《西游记》', author: '吴承恩' }
      // 第二次调用实参函数，返回值：2 !== 3 ==> true ==> 放到新数组中 ==> [{ id: 1, name: '《红楼梦》', author: '曹雪芹' }, { id: 2, name: '《西游记》', author: '吴承恩' }]

      // 第三次循环：v ==> { id: 3, name: '《水浒传》', author: '施耐庵' }
      // 第三次调用实参函数，返回值：3 !== 3 ==> false ==> 过滤掉，不会放到新数组中 ==> [{ id: 1, name: '《红楼梦》', author: '曹雪芹' }, { id: 2, name: '《西游记》', author: '吴承恩' }]

      // 第四次循环：v ==> { id: 4, name: '《三国演义》', author: '罗贯中' }
      // 第四次调用实参函数，返回值：4 !== 3 ==> true ==> 放到新数组中 ==> [{ id: 1, name: '《红楼梦》', author: '曹雪芹' }, { id: 2, name: '《西游记》', author: '吴承恩' }, { id: 4, name: '《三国演义》', author: '罗贯中' }]

      // 循环结束，新数组 ==> [{ id: 1, name: '《红楼梦》', author: '曹雪芹' }, { id: 2, name: '《西游记》', author: '吴承恩' }, { id: 4, name: '《三国演义》', author: '罗贯中' }]

      // 循环结束后，filter函数也调用完成了，会将【新数组】作为filter函数调用【最终的返回值】

      console.log(booksList, 'booksList');
      console.log(newBooksList, 'newBooksList');

      // -----------------------------

      const app = new Vue({
        el: '#app',
        data: {
          booksList: [
            { id: 1, name: '《红楼梦》', author: '曹雪芹' },
            { id: 2, name: '《西游记》', author: '吴承恩' },
            { id: 3, name: '《水浒传》', author: '施耐庵' },
            { id: 4, name: '《三国演义》', author: '罗贯中' },
          ],
        },
        methods: {
          del(id) {
            // 根据 id 过滤

            // filter方法的作用：过滤出匹配条件的元素，然后放到一个新数组中，返回出来
            // filter方法并不会改变原数组
            this.booksList = this.booksList.filter(v => v.id !== id);
          },
        },
      });
    </script>
  </body>
</html>
